<template>
	<view>
		<!-- 空白页 -->
		<empty v-if="loaded === true && infoList.length === 0"></empty>
		
		<!-- 订单列表 -->
		<view class="notice-item" v-for="(item, index) in infoList" :key="index">
			<view class="content" @click="$api.toUrl(`/pages/notice/notice_detail?id=${item.id}`)">
				<text class="title">{{ item.name }}</text>
				<view class="img-wrapper" v-if="item.thumb">
					<image class="pic" :src="item.thumb"></image>
				</view>
				<text class="introduce">{{ item.description }}</text>
				<view class="bot b-t">
					<text>{{ item.addtime_text }}</text>
					<text class="more-icon yticon icon-you"></text>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadingType"></uni-load-more>
		
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			headerPosition: 'fixed',
			headerTop: '0px',
			
			loaded: false, //加载完成
			loadingType: 'more', //加载更多状态
			
			infoList: [],
			p: 1,
			size: 20,
			count: 0
		};
	},
	onLoad(options) {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
		this.loadData();
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//上拉加载更多数据
	onReachBottom() {
		this.loadData();
	},
	methods: {
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add') {
			
			//防止重复加载
			if (this.loadingType === 'loading') {
				return;
			}
			
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
			
			if (type === 'refresh') {
				this.infoList = [];
				this.p = 1;
				this.count = 0;
				this.loaded = false;
				//下拉刷新停止
				uni.stopPullDownRefresh();
			}
			
			const param = {};
			param.catid = 2;
			param.p = this.p;
			param.size = this.size;
			await this.$http.request('Index', 'articlelist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						
						if(res.data.data.count > 0){
							this.infoList = this.infoList.concat(res.data.data.list);
						}
						
						this.p = this.p + 1;
						this.count = res.data.data.count;
						this.loaded = true;
						
						//判断是否还有下一页，有是more  没有是nomore
						if(this.count){
							this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
						}else{
							this.loadingType = 'nomore';
						}
						
					}
				}
				
			});
		},
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
	padding-bottom: 30upx;
}

.notice-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30upx;
}

.time {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80upx;
	padding-top: 10upx;
	font-size: 26upx;
	color: #7d7d7d;
	background-color: #DCDFE6;
}

.content {
	width: 710upx;
	padding: 0 24upx;
	background-color: #fff;
	border-radius: 4upx;
}

.title {
	display: flex;
	align-items: center;
	height: 90upx;
	font-size: 32upx;
	color: #303133;
}

.img-wrapper {
	width: 100%;
	height: 260upx;
	position: relative;
}

.pic {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6upx;
}

.cover {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 36upx;
	color: #fff;
}

.introduce {
	display: inline-block;
	padding: 16upx 0;
	font-size: 28upx;
	color: #606266;
	line-height: 38upx;
}

.bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80upx;
	font-size: 24upx;
	color: #707070;
	position: relative;
}

.more-icon {
	font-size: 32upx;
}
</style>
